[OSS] Swift製レーティングコントロール「Cosmos」を試してみた

Cosmosとは

Swiftで書かれたiOS/tvOS向けのレーティングUIコントロールです。
MITライセンスで公開されています。 リポジトリはこちら。

Cosmosを使用すると以下のようなレーティングUIが簡単に作れるようです。

※ 上記スクリーンショットはリポジトリより引用。

検証環境

本記事は以下の環境で検証を行っています。

• macOS Sierra バージョン 10.12.6
• Xcode Version 8.3.3 (8E3004b)
• Swift 3.1
• iPhone 7 シミュレーター iOS 10.3（14E8301）
• CocoaPods 1.3.1

セットアップ方法

Carthageにも対応していますが、今回はCocoaPodsでインストールします。 Podfileに以下を記載し、pod installします。

target 'CosmosSample' do
  use_frameworks!
  pod 'Cosmos'
end

記事執筆時点でバージョン11.0.3がインストールされました。インストール後は.xcworkspaceファイルを開けばCosmosが使える状態になります。

使ってみる

CosmosにはCosmosViewというUIViewのサブクラスが用意されているのでこれを使ってみます。

StoryboardでCosmosViewを貼り付ける

CosmosView は@IBDesignableで定義されているのでStoryboard上で見た目を確認できて便利です。

以下は画面中央に貼り付けて実行してみた結果です。 タップやドラッグに対応していて1から5までのレートをつけることができます。

カスタマイズしてみる

CosmosViewの外観はStoryboardのAttributes Inspectorもしくはコードでカスタマイズ可能です。

カスタマイズ項目は非常に多いので、ここでは一部を取り上げてコードでカスタマイズしてみます。 コードでカスタマイズする場合はCosmosViewのsettingsプロパティ経由で行います。

スターの数を変更する

cosmosView.settings.totalStars = 4

スターではなく画像を表示する

// 選択時の画像を設定
cosmosView.settings.filledImage = UIImage(named: "heart_filled")

// 未選択時の画像を設定
cosmosView.settings.emptyImage  = UIImage(named: "heart_empty")

※ アイコンについてはIcons8のアイコンを使わせていただきました。

スター半分やそれより細かい評価ができるようにする

fillModeを指定することで評価の粒度を設定することができます。
デフォルトは.fullになっており、値が1に満たないスターは塗りつぶされませんが、 .halfや.preciseを設定することで評価の粒度を細かくできます。

// スター半分の評価ができるようにする
cosmosView.settings.fillMode = .half

// 半分より細かい評価ができるようにする
cosmosView.settings.fillMode = .precise

イベントをハンドリングする

ユーザーがレートをつけた時のイベントをハンドリングするには以下のプロパティを使用します。レートの値がDouble型で受け取れます。

// タッチダウン時やドラッグしてレートが変わった場合に呼ばれる
cosmosView.didTouchCosmos = { rating in
    // ratingでレートの値（Double）が受け取れる
}

// ビューから指を離した時に呼ばれる
cosmosView.didFinishTouchingCosmos = { rating in
    // ratingでレートの値（Double）が受け取れる
}

おわりに

今回はSwift製レーティングコントロール「Cosmos」を試してみました。
本記事で紹介しきれなかったその他のカスタマイズ可能項目についてはこちらをご確認ください。 細かいところまでカスタマイズできるので使えるシーンはあるのではないでしょうか。